import {useEffect, useState} from "react";
import {UserAccount} from "../../model/UserAccount.ts";
import {baseUrl} from "../../settings/Settings.ts";
import axios from "axios";
import {useNavigate} from "react-router-dom";


type LoginBadgeProps = {
    username?: string;
};
const LoginBadge: React.FC<LoginBadgeProps> = () => {

    const [account, setAccount] = useState<UserAccount>()

    const [showDropdown, setShowDropdown] = useState(false);

    const handleToggleDropdown = () => {
        setShowDropdown(!showDropdown);
    };

    const handleSignOut = () => {
        // Add your sign out logic here
    };



    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(`${baseUrl}/api/account/info`, {
                    withCredentials: true, // send credentials with the request
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const data = response.data;
                if (response.status === 200) {
                    setAccount(data.account);

                }

            } catch (error) {
                console.error('Error fetching data');
            }
        };

        fetchData();
    }, []);
    const handleClick = () => {
        // Navigate to another page
        window.location.href = "/login";
    };
    if (account) {
        return (<div
            className="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis border rounded-pill badge-login"
            onClick={handleToggleDropdown}
        >
            <div className="dropdown m-0 p-0">
                <a
                    href="#"
                    id="profile-badge-text"
                    className="d-flex align-items-center link-body-emphasis text-decoration-none"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="30"
                        height="30"
                        fill="currentColor"
                        className="bi bi-person-circle me-2"
                        viewBox="0 0 16 16"
                    >
                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
                        <path
                            fillRule="evenodd"
                            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
                        />
                    </svg>
                    <span>{account.userId}</span>
                </a>
                {showDropdown && (
                    <ul className="dropdown-menu rounded-4 dropdown-menu-dark text-small shadow">
                        <li>
                            <a className="dropdown-item" href="#">
                                Settings
                            </a>
                        </li>
                        <li>
                            <hr className="dropdown-divider" />
                        </li>
                        <li>
                            <a
                                className="dropdown-item"
                                href="#"
                                id="btn-sign-out"
                                onClick={handleSignOut}
                            >
                                Sign out
                            </a>
                        </li>
                    </ul>
                )}
            </div>
        </div>
    );
    } else {
        return (
            <span
                className="badge d-flex align-items-center p-1 pe-2 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill badge-login"
                id="login-button" onClick={handleClick}>
        <a href="#" className="d-flex align-items-center link-body-emphasis text-decoration-none pe-1"
           aria-expanded="false">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                 className="bi bi-person-circle me-2" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path fill-rule="evenodd"
                      d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
            </svg>
            Log In
        </a>
    </span>
        )
    }
}

export default LoginBadge